<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <div id="chartmain" style="width:600px; height: 400px;"></div>

</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width:900px;height:300px"></div>
    <!-- ECharts单文件引入 -->
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
        var myColor = ['#81E7ED'] //内柱状图颜色
        var dataLine = [50, 66, 33, 25,50, 66, 33, 25,50, 66];
        var yList = ['南京银行', '北京银行', '镇江银行', '建设银行', '建设银行', '建设银行', '建设银行', '建设银行', '建设银行', '建设银行']
        let positionLeft = 0.4,
            max = 100 + 2 * positionLeft
        option = {
            grid: {
        x: "1%", //距离左边
        x2:"1%",
        y: "5%", // 上距离
        y2: "5%", // 下距离
        // left:"100%",
        containLabel: true,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      xAxis: {
        max: "dataMax",
        show: false,
      },
      // dataZoom: [
      //   {
      //     //默认为滚动条型数据区域缩放组件
      //     show: true,
      //     zoomLock: true,
      //     orient: "vertical",
      //     start: 60,
      //     end: 0,
      //   },
      // ],
      yAxis: [
        {
          type: "category",
          data:yList,
          axisLabel: {
            textStyle: {
              color: "#333",
              fontSize: 12,
            },
            interval: 0,
            formatter: function (params) {
              var newParamsName = ""; // 最终拼接成的字符串
              var paramsNameNumber = params.length; // 实际标签的个数
              var provideNumber = 6; // 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ""; // 表示每一次截取的字符串
                  var start = p * provideNumber; // 开始截取的位置
                  var end = start + provideNumber; // 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + "\n\n";
                  }
                  newParamsName += tempStr; // 最终拼成的字符串
                }
              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
              }
              //将最终的字符串返回
              return newParamsName;
            },
          },
          axisLine: {
            show: false,
          },

          axisTick: {
            show: false,
          },

          splitLine: {
            show: false,
          },
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 9, // only the largest 3 bars will be displayed
        },
        {
          type: "category",
          axisLabel: {
            textStyle: {
              color: "#333",
              fontSize: 12,
            },
          },
          interval: 0,
          //设置柱状图右边参数
          show: true,
          inverse: true,
          data:dataLine, //设置右边值
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 9, // only the largest 3 bars will be displayed
        },
      ],
      formatter: function (params) {
        var texts = "";
        texts +=
          "剩余电量" +
          "<br>" +
          params[0].data.name +
          "<br>" +
          params[0].data.value;
        return texts;
      },
      series: [
        {
          realtimeSort: false,
          showBackground: true,
          name: "剩余电量",
          type: "bar",
          data: dataLine,
          label: {
            show: false,
            position: "right",
            // valueAnimation: true,
          },
          itemStyle: {
            normal: {
              color: "#0d6ece",
              label: {
                show: false, //开启显示
                position: "right",
                textStyle: {
                  //数值样式
                  color: "#333",
                  fontSize: 10,
                },
              },
            },
          },
        },
      ],
      legend: {
        show: false,
      },
        }
        // 为echarts对象加载数据 
        var myChart = echarts.init(document.getElementById('chartmain'));

        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    </script>

</body>